<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改管理员信息</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css">
    <style>
        .layui-form-label {
            width: 120px;
        }
        .layui-input-block {
            margin-left: 150px;
        }
        .form-container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 15px rgba(0, 0, 0,.1);
        }
        .form-title {
            text-align: center;
            margin-bottom: 25px;
            color: #333;
            font-weight: 400;
        }
        .form-actions {
            text-align: center;
            margin-top: 30px;
        }
        .layui-btn {
            margin: 0 10px;
        }
        .confirm-pwd-group {
            display: none;
        }
    </style>
</head>
<body class="layui-bg-gray">
<div class="form-container">
    <h3 class="form-title">修改管理员信息</h3>
    <form class="layui-form" action="<%=request.getContextPath()%>/admin/edit" method="post" id="editForm">
        <!-- 添加隐藏的id域 -->
        <input type="hidden" name="id" value="${record.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" value="${record.username}" readonly
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" id="passwordInput" value="${record.pwd}"
                       placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item confirm-pwd-group" id="confirmPwdGroup">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPwd" id="confirmPwd"
                       placeholder="请再次输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" value="${record.nickname}"
                       placeholder="请输入昵称" class="layui-input">
            </div>
        </div>
        <div class="form-actions layui-form-item">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="editSubmit">
                <i class="layui-icon layui-icon-ok"></i>立即修改
            </button>
            <button type="button" class="layui-btn layui-btn-primary"
                    onclick="history.go(-1)">
                <i class="layui-icon layui-icon-return"></i>返回
            </button>
            <button type="reset" class="layui-btn layui-btn-warm" id="resetBtn">
                <i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </form>
</div>

<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 获取密码输入框和确认密码组
        var passwordInput = $('#passwordInput');
        var confirmPwdGroup = $('#confirmPwdGroup');
        var confirmPwd = $('#confirmPwd');

        // 监听密码输入框变化
        passwordInput.on('input', function () {
            if ($(this).val().length > 0) {
                confirmPwdGroup.show();
            } else {
                confirmPwdGroup.hide();
                confirmPwd.val(''); // 清空确认密码
            }
        });

        // 初始检查密码框是否有值
        if (passwordInput.val().length > 0) {
            confirmPwdGroup.show();
        }

        // 重置按钮点击事件
        $('#resetBtn').on('click', function () {
            setTimeout(function () {
                if (passwordInput.val().length === 0) {
                    confirmPwdGroup.hide();
                    confirmPwd.val('');
                }
            }, 10);
        });

        // 表单提交验证
        // 修改后的表单提交处理逻辑
        form.on('submit(editSubmit)', function(data) {
            if (data.field.pwd && data.field.pwd!== data.field.confirmPwd) {
                layer.msg('两次输入的密码不一致', {icon: 2});
                return false;
            }

            // 防止重复提交
            $('#editForm').find('button[type="submit"]').attr('disabled', true);

            $.ajax({
                type: 'POST',
                url: $('#editForm').attr('action'),
                contentType: 'application/json', // 指定请求体格式为 JSON
                data: JSON.stringify(data.field), // 将表单数据序列化为 JSON
                dataType: 'json', // 期望返回 JSON 格式
                success: function(response) {
                    if (response.success) {
                        layer.msg(response.message, {icon: 1}, function() {
                            window.location.href = response.redirectUrl;
                        });
                    } else {
                        layer.msg(response.message, {icon: 2});
                        $('#editForm').find('button[type="submit"]').removeAttr('disabled');
                    }
                },
                error: function() {
                    layer.msg('网络错误，请重试', {icon: 2});
                    $('#editForm').find('button[type="submit"]').removeAttr('disabled');
                }
            });
            return false;
        });
    });
</script>
</body>
</html>